<template>
   <ex-dialog v-model="visible" draggable :title="form.name ? form.name : (form.id ? form.name : '新增')"
  width="700" :contentHeight="450">
      <template #default>
        <el-tabs v-model="activeName"  style="height: 100%">
          <el-tab-pane label="基本信息" name="base" style="height: 100%">
            <el-descriptions class="margin-top" :column="2" border>
              <el-descriptions-item label="是否分组"><ex-label code="IS_GROUP" :value="form.isGroup"/></el-descriptions-item>
			        <el-descriptions-item label="所属分组"><ex-label :code="form.entityName" :value="form.parentLevelCode"/></el-descriptions-item>
              <el-descriptions-item label="名称">{{form.name}}</el-descriptions-item>
			        <el-descriptions-item label="编码">{{form.code}}</el-descriptions-item>
              <template v-if="form.isGroup==='0'">
                <el-descriptions-item label="控件类型"><ex-label code="WIDGET_TYPE" :value="form.widgetType"/></el-descriptions-item>
                <el-descriptions-item label="数据源类型"><ex-label code="DATA_SOURCE_TYPE" :value="form.dataSourceType"/></el-descriptions-item>
                <el-descriptions-item label="数据源"><ex-label :code="form.dataSourceType==='1'?'SysDictionary':'ENTITY_DICT'" :value="form.dataSourceCode"/></el-descriptions-item>
                <el-descriptions-item label="预览" :span="2">
                  <el-row :gutter="80">
                    <el-col :lg="24">
                      <ex-form-item v-if="form.isGroup==='0'" :column="form" :model="preview" preview/>
                    </el-col>
                  </el-row>
                </el-descriptions-item>
                <el-descriptions-item label="验证规则">{{form.checkRuleCode}}</el-descriptions-item>
                <el-descriptions-item label="格式化规则">{{form.formatRuleCode}}</el-descriptions-item>
              </template>
              <el-descriptions-item label="是否可用"><ex-label code="IS_ENABLED" :value="form.isEnabled"/></el-descriptions-item>
              <el-descriptions-item label="排序">{{form.orderWeight}}</el-descriptions-item>
			        <el-descriptions-item label="创建人"><ex-label code="SysUser" :value="form.createUser"/></el-descriptions-item>
              <el-descriptions-item label="创建时间"><ex-label format code="DATETIME" :value="form.createTime"/></el-descriptions-item>

            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane v-if="form.dictType==='1'" label="指定角色" name="SysRole" style="height: 100%">
            <ex-rel-table ref="roleRelTable" size="small" :rel-entity="form" :treeApi="this.$API.system.role.treeData" default-expand-all :selection="false"></ex-rel-table>
          </el-tab-pane>
        </el-tabs>
      </template>
    </ex-dialog>
  </template>

  <script>
  import ExRelTable from "@/components/exRelTable/index.vue";
  import ExLabel from "@/components/exLabel/index.vue";
  import ExFormItem from "@/components/exFormItem/index.vue";
  import exDialog from '@/components/exDialog';

  export default {
    computed: {
    },
    emits: ['success'],
    components: {
      ExFormItem,
		ExLabel,
      ExRelTable,
      exDialog
    },
    props: {
    },
    data() {
      return {
        activeName: 'base',
        visible: false,
        form: {},
        preview: {},
      }
    },
    methods: {
      //显示
      open(entity) {
        this.form = Object.assign({}, entity);
        this.visible = true;
        this.activeName = "base";
      },
    }
  }
  </script>

  <style scoped>
  h2 {
    font-size: 17px;
    color: #3c4a54;
    padding: 0 0 30px 0;
  }

  [data-theme="dark"] h2 {
    color: #fff;
  }

  </style>
